<template>
    <div class="container" :class="bgchange">

        <div class="container-relative" @keyup.enter="handleForgetPassword">
            <div class="wrapper widget-box" v-bind:class="{'visible': visibleForget}">

                <div class="wrapper-body" v-loading="loadingForget" element-loading-text="请稍等...">
                    <div class="wrapper-main">
                        <div class="header-forget">
                            <i class="el-icon-mars-key"></i> 重置密码
                        </div>
                        <el-form :model="forgetForm" ref="forgetForm" :rules="forgetRules">
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="password">
                                    <el-input type="password" v-model="forgetForm.password" placeholder="登录密码"
                                              suffix-icon="el-icon-mars-key"></el-input>
                                </el-form-item>
                            </label>
                            <label class="block" style="margin-top: 5px;">
                                <el-form-item prop="checkPassword">
                                    <el-input type="password" v-model="forgetForm.checkPassword" placeholder="确认密码"
                                              suffix-icon="el-icon-mars-retweet"></el-input>
                                </el-form-item>
                            </label>
                            <div class="forget-btn">
                                <label>
                                    <el-button type="danger" icon="el-icon-mars-key" 
                                    :disabled="loginForgetBtoDisabled"
                                    @click="handleForgetPassword">提交
                                    </el-button>
                                </label>
                            </div>
                        </el-form>

                    </div>
                    
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import {Message} from 'element-ui'
    import { GetQueryString } from '@/libs/utils'

    export default {
        name: 'forget',
        data() {
            const validatePassword = (rule, value, callback) => {
                if (value.length < 4) {
                    callback(new Error('密码不能小于4位'))
                }
                callback()
            }
            const validatePasswordDoubleCheck = (rule, value, callback) => {
                if (this.forgetForm.password != this.forgetForm.checkPassword) {
                    callback(new Error('密码不一致'))
                }
                callback()
            }
            return {
                token: null,

                bgchange: 'b',
                visibleForget: true,
                loading: false,
                loadingForget: false,
                msg: '',
                success: false,
                showMsg: false,
                loginForgetBtoDisabled: false,

                forgetForm: {
                    token: null,
                    password: null,
                    checkPassword: null,
                },
                forgetRules: {
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, message: '最少 4 个字符', trigger: 'blur'},
                        {min: 4, max: 15, message: '最多 15 个字符', trigger: 'blur'}
                    ],
                    checkPassword: [{required: true, trigger: 'blur', validator: validatePasswordDoubleCheck}],
                }

            }
        },
        created() {
            this.forgetForm.token = GetQueryString(window.location.href, 'token')
        },
        methods: {
           
            handleForgetPassword() {
                this.$refs.forgetForm.validate(valid => {
                    if (valid) {
                        this.loadingForget = true
                        this.loginForgetBtoDisabled = true

                        this.$store.dispatch('handleForgetPasswordByUpdate', this.forgetForm).then(response => {
                            if(response.status) {
                                Message.success({
                                    duration: 500,
                                    message: response.msg,
                                    onClose: ()=>{
                                        this.loadingForget = false
                                        setTimeout(() => {
                                            this.$router.replace({ name: 'login' })
                                        }, 500)
                                    }
                                });
                            } else {
                                this.loginForgetBtoDisabled = false
                                this.loadingForget = false
                                Message.error({message: response.msg});
                            }

                        }).catch((error) => {
                            this.loginForgetBtoDisabled = false
                            this.loadingForget = false
                            this.success = false
                            if(!error.status) {
                                this.msg = error.msg
                            }
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./login";

</style>
